<template>
    <systemDialog :title="dailog.title" :visible="dailog.visible" :height="dailog.height" :width="dailog.width"
        @onClose="onClose" @onConfirm="confirm">
        <template v-slot:content>
            <el-table size="mini" :data="roleList.list" :height="tableHeight" border stripe>
                <el-table-column  align="center" label="选择">
                    <template #default="scope">
                        <el-radio v-model="selectRoleId" :label="scope.row.id" @change="getSelectRole">{{ '' }}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="roleQuery.currentPage"
                :page-sizes="[10, 20, 40, 80, 100]"
                :page-size="roleQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="roleQuery.total" background>
                :pager-count="7">
            </el-pagination>
        </template>
    </systemDialog>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
import systemDialog from '@/components/systemDialog.vue';
import userDialog from '@/hooks/userDialog';
import assignRole from '@/composables/user/assignRole';

// 弹框属性
const {dailog, onClose, onShow} = userDialog()

const { confirm, show, roleList,sizeChange,currentChange,roleQuery,tableHeight,selectRoleId,getSelectRole } = assignRole(dailog,onShow,onClose)

// 暴露方法,给父组件UserList.vue使用
defineExpose({
    show
})
</script>
<style scoped lang='scss'>
</style>